<template>
  <div class="login">
    <div class="login_img">
      <img src="../../assets/img/login_img.png" />
    </div>
    <div class="login_num">
      <p class="login_num_img1">
        <img src="../../assets/img/fsl.png" />
      </p>
      <p class="login_num1">菲仕兰活动核销系统</p>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
        <el-form-item prop="name">
          <div class="passdd">账号</div>
          <el-input type="input" placeholder="请输入账号" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <div class="passdd">密码</div>
          <el-input type="password" placeholder="请输入密码" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
        </el-form-item>

        <div class="gouxuan">
          <el-checkbox class="gouxuan1" v-model="checked">记住密码</el-checkbox>
          <div class="gouxuan2">
            忘记密码
          </div>
        </div>

        <!-- 登录注册按钮 -->
        <div class="deng_zhu">
          <div class="deng_zhu1" @click="submitForm('ruleForm')">
            <span>登录</span>
          </div>
          <div class="deng_zhu1">
            <span>注册账号</span>
          </div>
        </div>
      </el-form>

    </div>
  </div>
</template>

<script>
  export default{
    name:"login",
    data(){
      // 密码提醒输入
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return{
        // 账号密码
         ruleForm: {
           pass: '123456',
           name:'popato'
         },
         rules: {
           pass: [
             { validator: validatePass, trigger: 'blur' }
           ],
           name: [
             { required: true, message: '请输入账号', trigger: 'blur' },
           ],
         },
         // 记住密码勾选
         checked:true,
         // 自定义token
         token:'小小猪'
      }
    },
    methods:{
      // 登录验证
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var token_name=[{name:this.ruleForm.name},{pass:this.ruleForm.pass},{checked:this.checked},{token:this.token}];
            // vuex传递token,登录处理异步操作，使用vuex中的actions
            // this.$store.dispatch("login_pro",token_name);
            // vuex传递token
            this.$store.commit("loginYes",token_name);
            this.$store.commit("loadingShow",{title:"登陆中..."})
            setTimeout(()=>{
              this.$store.commit("loadingShow")
              this.$router.push("/")
            },1000)
          } else {
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .login{
    background: url(../../assets/img/login_bei.jpg) no-repeat;
    background-size: 100% auto;
    background-position:bottom right ;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid blue;
    padding: 0 3rem;
    box-sizing: border-box;

    .login_img{
      flex: 1.5;
      display: flex;
      justify-content: center;

      img{
        width: 90%;
      }
    }
    .login_num{
      flex: 1;
      margin-left: 0.8rem;

      .login_num_img1{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img{
          width: 50%;
        }
      }
      .login_num1{
        color: #29A7FA;
        font-size: 0.26rem;
        text-align: center;
        margin: 0.3rem 0;
        font-weight: bold;
      }
      .demo-ruleForm{
        width: 80%;
        margin: auto;
      }
      .passdd{
        color: #333;
        font-size: 0.26rem;
        font-weight: bold;
        margin-bottom: 0.1rem;
      }
      .gouxuan{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.5rem 0 0rem 0;

        .gouxuan2{
          font-size: 0.24rem;
          color: #333;
          cursor: pointer;
        }
        .gouxuan2:hover{
          color: #29A7FA;
        }
      }
      .deng_zhu{
        margin-top: 0.3rem;
        .deng_zhu1{
          display: flex;
          justify-content: center;
          padding: 0.18rem 0;
          background-color: #29A7FA;
          border-radius: 0.4rem;
          cursor: pointer;

          span{
            font-size: 0.24rem;
            color: #fff;
          }
        }
        .deng_zhu1:last-child{
          background-color: #fff;

          span{
            color: #29A7FA;
            border-bottom: 1px solid #29A7FA;
          }
        }

      }

    }
  }
</style>
<style type="text/css">
  .el-input__inner{
    padding-right: 0.8rem!important;
    border: 1px solid #CDCDCD;
    border-radius: 0.24rem;
    padding: 0.3rem 0.2rem;
  }
  .el-checkbox__label{
    font-size: 0.24rem;
    color: #333;
  }
  .el-checkbox__inner{
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 0.04rem;
    text-align: center;
  }
  .el-checkbox__inner::after{
    top: 50%;
    left: 50%;
    height: 0.14rem;
    width: 0.06rem;
    transform: translate(-50%,-65%) rotate(45deg) scaleY(0)!important;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner::after{
    transform: translate(-50%,-65%) rotate(45deg) scaleY(1)!important;
    -webkit-transform:translate(-50%,-65%) rotate(45deg) scaleY(1)!important;
  }
</style>
